<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入下拉选择</title>
    <link rel="stylesheet" type="text/css" href="../scripts/vendor/bootstrap-4.0.0/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../scripts/vendor/bootstrap-4.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../scripts/plugins/input_select/input-select-ysy.css"/>
</head>
<body>
<div style="width: 100%;height: 100%;">
    <div style="position:relative;top:300px;width: 500px;margin: 0 auto;">
        <input style="width: 500px" type="text" class="form-control demo">
    </div>
</div>

<script type="text/javascript" src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../scripts/vendor/bootstrap-4.0.0/js/bootstrap.js"></script>
<script type="text/javascript" src="../scripts/vendor/bootstrap-4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../scripts/plugins/input_select/input-select-ysy.js"></script>
<script>
    let options = {};
    let source = [];
    source.push({id: "1", text: "图灵的秘密:他的生平、思想及论文解读"});
    source.push({id: "2", text: "计算机系统概论"});
    source.push({id: "3", text: "深入理解Linux内核"});
    source.push({id: "4", text: "深入Linux内核架构"});
    source.push({id: "5", text: "TCP/IP详解 卷1：协议"});
    source.push({id: "6", text: "Linux系统编程（第2版）"});
    source.push({id: "7", text: "Linux内核设计与实现（第3版）"});
    source.push({id: "8", text: "数据结构与算法分析"});
    source.push({id: "9", text: "深入理解计算机系统（原书第2版）"});
    source.push({id: "10", text: "计算机程序的构造和解释"});
    source.push({id: "11", text: "挑战程序设计竞赛"});
    options.source = source;
    // ajax请求数据
    // options.source = function (process) {
    //     let post = {};
    //
    //     $.ajax({
    //         url: "",
    //         type: "post",
    //         data: JSON.stringify(post),
    //         contentType: "application/json; charset=utf-8",
    //         async: true,
    //         success: function (result) {
    //             process(result);
    //         },
    //         error: function (error) {
    //             console.log(error);
    //         }
    //     });
    // };
    // options.afterSelect = function (id, text) {
    // };
    // options.afterDisplayText = function (ele, data) {
    // };
    $("input.demo").inputSelect(options);
</script>
</body>
</html>
